<template>
	<view class="topup">
		<view class="topBox">
			<view class="title" v-if="nickname">{{nickname}}</view>
			<view class="textBox mTop2">
				<view class="text">{{info.set_anme}}</view>
			</view>
		</view>
		
		<view class="formBox mTop4">
			<view class="item">
				<input class="input" type="text" v-model="info.recharge_user_name" :disabled="info.order_status == 2 ?false:true" placeholder="请输入姓名" placeholder-class="placeholderClase"/>
			</view>
			<view class="item mTop2">
				<input class="input" type="number" v-model="info.recharge_mobile" :disabled="info.order_status == 2 ?false:true" placeholder="请输入充值号码" placeholder-class="placeholderClase"/>
			</view>
		</view>
		<view class="bottomBox mTop4" v-if="info.order_status == 2">
			<button class="btn" type="default" hover-class="none" v-if="info.set_type == 1" @click="PayEvent()">确认支付</button>
			<button class="btn" type="default" hover-class="none" v-else  @click="PayEvent()">下一步</button>
		</view>
		<view class="explanation mTop3">
			<view class="title">套餐名称</view>
			<view class="text mTop1">
			<mp-html :content="info.set_name" :tag-style="tagStyle"></mp-html>
			</view>
		</view>
		<view class="explanation mTop3">
			<view class="title">活动介绍</view>
			<view class="text mTop1">
			<mp-html :content="info.set_des" :tag-style="tagStyle"></mp-html>
			</view>
		</view>
		<view class="explanation mTop3">
			<view class="title">请认真阅读以下信息后再充值:</view>
			<view class="text mTop1">
			<mp-html :content="info.set_content" :tag-style="tagStyle"></mp-html>
			</view>
		</view>
		
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	var jweixin = require('../../common/wxsdk.js')  
	export default {
		data() {
			return {
				nickname:'',
				order_id: 0,
				closeEdit: true,
				info:[],
				tagStyle: {
					p: 'font-size: 28rpx;'
				}
			}
		},
		onLoad (options) {
			if (options.order_id) {
				this.order_id = options.order_id || 0;
			}
			this.getRechargeOrder();
		},
		methods: {
			PayEvent(){
				let that = this;
				util.requestPost('index/rechargePay', {order_id:that.info.id}, (res) => {
					if(res.code == 1 && that.info.set_type == 1){
						jweixin.config({
							debug: false, 
							appId:res.data.list.appId, // 必填，公众号的唯一标识
							timestamp: res.data.list.timeStamp, // 必填，生成签名的时间戳
							nonceStr: res.data.list.nonceStr, // 必填，生成签名的随机串
							signature: res.data.list.paySign,// 必填，签名
							jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
						});
						
						jweixin.ready(function(){
						  jweixin.chooseWXPay({
						    timestamp: res.data.list.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
						    nonceStr: res.data.list.nonceStr, // 支付签名随机串，不长于 32 位
						    package: res.data.list.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
						    signType: res.data.list.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
						    paySign: res.data.list.paySign, // 支付签名
						    success: function (res) {
						      // 支付成功后的回调函数
							  that.$toast('支付成功')
							  setTimeout(() => {
							  	uni.redirectTo({
							  		url:'/pages/my/recharge',
									fail(err) {
										uni.showToast({
											title: `跳转失败：${JSON.stringify(err)}`,
											icon: 'none'
										})
									}
							  	})
							  }, 500);
						    },
							fail(err){
								 that.$toast('支付失败',JSON.stringify(err))
							}
						  });
						});
						jweixin.error(function(res){
							that.$toast('请刷新重试')
						});
					} else {
						that.$toast(res.msg)
					}
				}, (err) => {
					console.log(err);
				}, {isShowLoading: false});
			},
			
			getRechargeOrder(){
				util.requestPost('index/getRechargeOrder', {order_id:this.order_id}, (res) => {
					if (res.code == 1) {
						this.info = res.data.list;
						this.nickname = res.data.nickname;
					} else {
						
					}
				}, (err) => {
					console.log(err);
				}, {isShowLoading: false});
			},
		}
	}
</script>

<style scoped lang="scss">
.topup {
	padding: 20rpx;
	.topBox {
		color: #FFFFFF;
		padding: 20rpx;
		text-align: center;
		border-radius: 20rpx;
		background: $btn-bg-color;
		.textBox {
			.text {
				font-size: 26rpx;
			}
		}
	}
	.formBox {
		.item {
			border: $border-base;
			.input {
				padding: 0 20rpx;
				height: 66rpx;
				font-size: 28rpx;
			}
			.placeholderClase {
				font-size: 24rpx;
			}
		}
	}
	.explanation {
		font-size: 24rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		border: 1rpx dashed #999;
		.title {
			font-size: 26rpx;
			color: $primary-color;
		}
	}
	.bottomBox {
		.btn {
			color: #FFFFFF;
			font-size: 28rpx;
			line-height: 76rpx;
			border-radius: 20rpx;
			background: $btn-bg-color;
			&::after {
				border: none;
			}
		}
	}
}
</style>
